<template>
  <div class="app-role">
    <h3>商城商品</h3>
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
     labelWidth="100px"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     @pagination="handlePagination"
     :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
   >
     <template v-slot:tools>
       <el-button-group>
         <el-button type="primary" @click="handleAdd">添加商品</el-button>
       </el-button-group>
     </template>
     
     <template #productName="{row}">
        <div class="productName_box">
          <img class="productName_img" :src="row.coverImg" />
          <div class="productName_Name">
            <div>{{ row.productName }}</div>
            <div style="color: #c4c4c3;">已售：{{ row.saleNum }}</div>
          </div>
        </div>
     </template>
     <template #status="{row}">
        <div>
          <span class="status-circle" :class="{
            greenStatus:row.status!=1,
            yellowStatus:row.status==1,
            }"></span>
          <span>{{ row.status==1?'待上架':'已上架' }}</span>
        </div>
     </template>
     <template #stockStatus="{row}">
      <div>
        <span class="status-circle" :class="{
          greenStatus:row.stockStatus==1,
          grayStatus:row.stockStatus!=1,
          }"></span>
        <span>{{ row.stockStatus==1?'有货':row.stockStatus==2?'部分缺货':'缺货' }}</span>
      </div>
     </template>
     <template #skuStatus="{row}">
        <div>
          <span class="status-circle" :class="{
            grayStatus:row.skuStatus!=2 && row.skuStatus!=1,
            greenStatus:row.skuStatus==1,
            yellowStatus:row.skuStatus==2,
            }"></span>
          <span>{{ row.skuStatus==1?'全部在售':row.skuStatus==2?'部分在售':'全部禁售' }}</span>
        </div>
     </template>
     <template #opt="scope">
        <el-button v-if="scope.row.status==1" type="primary" link @click="handleStatus(scope.row,2)">上架</el-button>
        <el-button v-if="scope.row.status==2" type="primary" link @click="handleStatus(scope.row,1)">下架</el-button>
       <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
       <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
     </template>
   </Table>
   <el-dialog v-model="showDialog" :title="dialogTitle" width="900">
      <el-form ref="refForm" :model="formData" size="default">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" label-width="100px">
              <el-input v-model="formData.productName" :maxlength="20" show-word-limit placeholder="请输入商品名称" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="flex_one_box tr">
              <el-button type="primary" size="default" @click="handleQuery2">搜索</el-button>
              <el-button size="default" @click="resetQuery2">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="product_tem_wrap">
        <div class="product_tem_box" v-for="(item,i) in tableData2" :key="'tableData_item'+i" @click="selectTemeplate(item)">
          <div class="product_tem_img">
            <img :src="item.coverImg" />
          </div>
          <div class="product_tem_name">
            <div class="product_tem_name_text">{{ item.productName }}</div>
            <div class="product_tem_typeName">{{ item.typeNames }}</div>

          </div>
        </div>
      </div>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" size="default">取消</el-button>
          <el-button type="primary" @click="handleSubmit" size="default">
            确定
          </el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup name="productTemeplate">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getGoodsList, saveGoods,changeGoodStatus,getTemplateList } from "@/api/goods";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableData2 = ref([])
const total = ref(0)
const total2 = ref(0)
const tableLoading = ref(true)
const tableLoading2 = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const router = useRouter();

const formData = ref({
  productName:'',
})
const data = reactive({
 tableColumns: [
   { label: "商品名称", prop: "productName",slot: 'productName',width:300},
   { label: "价格", prop: "priceLine" },
   { label: "库存状态", prop: "stockStatus",slot: 'stockStatus' },
   { label: "添加时间", prop: "gmtCreate" },
   { label: "上架状态", prop: "status",slot: 'status' },
   { label: "SKU销售状态", prop: "skuStatus",slot: 'skuStatus' },
   { label: "操作",  prop: "opt", slot: 'opt',width:150},
 ],
 queryColumns: [
  { label: "商品名称", prop: "productName", type: 'input', attrs: {placeholder:'请输入'}},
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [

 ]
})
const pageParams2 = ref({
  current: 1,
  size: 10
})
const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value,
  }
  getGoodsList(data)
  .then(res => {
    let list = res.data.records || []
     tableData.value = list
     total.value = res.data.total
  })
  .finally(() => {
     tableLoading.value = false
  })
}

getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}
/** 搜索按钮操作 */
const handleQuery2 = (val) => {
  pageParams2.value.current = 1
 getTemplateList2()
}
/** 重置按钮操作 */
const resetQuery2 = (val) => {
  formData.value = {}
 pageParams2.value.current = 1
 getList()
}

/** 打开新增弹窗 */
const handleAdd = () => {
  dialogTitle.value = '选择模板'
  // 重置表单数据
  formData.value = {
    productName: '',
  }
  pageParams2.value = {
    current: 1,
    size: 10
  }
  getTemplateList2()
  showDialog.value = true
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
  router.push({
    path:'/productMgmt/product/add',
    query:{
      id:row.id,
    }
  })
}
/** 获取列表数据 */
const getTemplateList2 = () => {
  tableLoading2.value = true
  const data  = {
     ...formData.value,
     ...pageParams2.value
  }
  getTemplateList(data)
  .then(res => {
     tableData2.value = res.data.records
     total2.value = res.data.total
  })
  .finally(() => {
     tableLoading2.value = false
  })
}
const selectTemeplate=(item)=>{
  router.push({
    path:'/productMgmt/product/add',
    query:{
      templateId:item.id,
    }
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
 proxy.$modal.confirm('是否确认删除此数据？').then(function() {
  saveGoods({id: row.id, delFlag: -1}).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
   })
 })
}
/** 删除按钮操作 */
function handleStatus(row,status) {
 proxy.$modal.confirm('是否确认'+(status==1?'下架':'上架')+'此商品？').then(function() {
  changeGoodStatus({id: row.id, status}).then(() => {
     getList()
     proxy.$modal.msgSuccess(status==1?"下架成功":"上架成功")
   })
 })
}
const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
</script>

<style lang="scss" scoped>
.productName_box{
  display: flex;
  align-items: center;
  .productName_img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 8px;
  }
  span{

  }
}
.app-role {
 padding: 8px
}
.product_tem_wrap{
  display: flex;
  width: 100%;
  max-height: 400px;
  overflow: auto;
  flex-wrap: wrap;
  padding: 20px 0;
  padding-left:20px;
}
.product_tem_box{
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
  height: 90px;
  margin-bottom: 20px;
  margin-right: 3%;
  padding: 10px;
  width: 30%;
  display: flex;
  .product_tem_img{
    width: 68px;
    height: 68px;
    margin-right: 8px;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .product_tem_name{
    flex: 1;
  }
  .product_tem_name_text{
    height: 40px;
    line-height: 20px;
    margin-bottom: 6px;
    max-width: 150px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    word-break: break-all;
  }
  .product_tem_typeName{
    color: #c4c4c3;
  }
}
.product_tem_box:hover{
  border-color: #4a89f0;
}
</style>